<template>
	<div id="login" table="社区团购" clearfix>
		<div class="login-box">
      <el-row type="flex" justify="center">
			<el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" class="loginForm_box">
        <h1>登录</h1>
			  <el-form-item label="账号" prop="username" label-width="60px" id="username" class="input-iteam">
			    <el-input placeholder="请输入账号" v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
			  </el-form-item>
			  <el-form-item label="密码" prop="password" label-width="60px" id="password" class="input-iteam">
			    <el-input placeholder="请输入密码" type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
			  </el-form-item>
        <div style="display: flex">
          <div style="flex: 1">还没账号？去<span @click="toRegister" style="color: #42b983;cursor: pointer">注册</span></div>
          <div style="text-align: right;flex: 1;color: #42b983;cursor:pointer;">忘记密码</div>
        </div>
			</el-form>
      </el-row>
			</div>
			
	</div>
</template>

<script>
	export default{
		data(){
			  return{
				 // 表单对应的数据对象
				 loginForm: {
				     username: 'admin',
				     password: '123456',
				 },
				 // 表单校验规则
				 loginFormRules: {
           username: [
             { required: true, message: '请输入登录账号', trigger: 'blur'},
             { min: 1, max: 11, message: '请输入5到11位字符', trigger: 'blur'}
           ],
           password: [
             { required: true, message: '请输入登录密码', trigger: 'blur'},
             { min: 6, max: 11, message: '请输入6到11位字符', trigger: 'blur'}
           ]
				 }
			  }
		  },
		  methods: {
		      // 登录按钮
        async login() {
		          // 判断表单校验是否有效
		          this.$refs.loginFormRef.validate(async valid => {
		              if(!valid)
		                  return this.$message.error('校验失败')

		              //发登录请求
                  const {data: res}= await this.$http.post('/sysUsers/Users/Login', this.loginForm)
		              console.log(res);
		              if(res.metaDto.status !== 200)
                    return this.$message.error('用户名或密码有误!')

                    this.$message.success('登录成功')
                    //保存 token 到 sessionStorage, 与localStorage区别
                    sessionStorage.setItem('token', res.token)
                    //存储用户信息到浏览器
                    localStorage.setItem("user", JSON.stringify(res.sysUsers));
                    // 导航到 Home 组件
                    this.$router.push('/')
                    // 刷新整个页面
                    window.location.reload();
		          })
		      },
          /* 注册 */
          toRegister(){
            this.$router.push("/register");
        },
		  }
		}
</script>
<style scoped>
html{
  height: 90%;
}
body{
  height: 90%;
}

#login{
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-box{
  background-color: #fff;
  width: 358px;
  height: 488px;
  border-radius: 15px;
  padding: 0 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

h1{
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}
</style>

